<template>
  <div>
    <el-card>
      <el-tabs :tab-position="'left'" style="height: 100%;">
        <el-tab-pane label="项目介绍">
          <div style="fontSize:30px;margin-left:20%">基于Element-UI的电商管理界面</div>
          <div class="title">项目流程</div>
          <div class="info">
            <img draggable="false" src="~@/assets/lc.png" alt />
          </div>
          <div class="title">项目接口</div>
          <div class="info">所有项目数据均来源于后端API接口</div>
          <div class="info">网络接口: https://www.liulongbin.top:8888/api/private/v1/</div>
          <div class="info">本地接口: http://127.0.0.1:8888/api/private/v1/ (使用方法见项目地址)</div>
        </el-tab-pane>
        <el-tab-pane label="开发介绍">
          <div class="title">开发相关</div>
          <div class="info">时间: 2020-3-31 作者: Lu Dun</div>
          <div class="title">前端技术</div>
          <div class="info">Vue,Vue-router,Element-UI,Axios</div>
          <div class="info"></div>
          <div class="title">开发目的</div>
          <div class="info">熟悉使用Element-UI组件库进行开发</div>
          <div class="info">使用Axios进行与后端交互开发</div>
          <div class="title">学习素材</div>
          <div class="info">
            <a
              href="https://www.bilibili.com/video/BV1EE411B7SU"
              target="_block"
            >B站视频:Vue实战项目：电商管理系统（Element-UI）</a>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目地址">
          <div class="title">个人地址已上线</div>
          <div class="info">
            码云地址:
            <a
              href="https://gitee.com/LuDun123/background_management_system"
              target="_block"
            >https://gitee.com/LuDun123/background_management_system</a>
          </div>
          <div class="info">此网站已上线: <a href="http://ludun123.gitee.io/background_management_system">http://ludun123.gitee.io/background_management_system</a></div>
          <div class="title">后端接口使用方法</div>
          <div class="info">进入码云地址，下载项目 其中vueShop-api-server为后端配置文件夹</div>
          <div class="info">将该文件夹/db下的mydb.sql导入数据库(我用的是wampserver),设置数据库密码为root</div>
          <div class="info">(需要node环境)然后node app.js就将后端接口跑起来了</div>
        </el-tab-pane>
        <el-tab-pane label="我的学习笔记">
          <div class="title">项目优化</div>
          <div
            class="info"
          >最初项目打包完将近2.8MB,后来通过webpack配置，主要原因是在main.js中导入了太多的外部组件。通过在vue.config.js中使用chainWebpack链式配置，加载外部CDN资源，使得项目最终压缩至几百KB</div>
          <div class="title">组件学习</div>
          <div
            class="info"
          >项目使用了多种插件，除了Element-UI外，还引用了Echarts做图表展示，lodash做js对象深拷贝，quill-editor提供富文本编辑器,nprogress做进度加载条</div>
          <div class="title">后端对接</div>
          <div class="info">一个良好的后端接口文档使得前端开发在获取数据时非常方便，再次感谢视频作者提供的这些素材。</div>
          <div class="info">
            <el-button type="primary" @click="showDialog">文档预览</el-button>
          </div>
          <div class="title">Element-UI</div>
          <div
            class="info"
          >因为我在学习html,css,js的过程中，一直没学bootstrap，对没用过UI库非常遗憾。这次项目就是想去尝试一下UI库的使用并配合Vue的开发。</div>
          <div class="info">这次学习使我对Element-UI官网文档有了更详细的认识，以后在使用ELement-UI开发时，可以翻文档会更快速(∩_∩)</div>
          <div class="info">
            主要组件学习：form表单及表单验证；table表格及自定义作用域插槽；cascade级联选择器及props配置；pagination分页功能及相关数据绑定，需和后端数据搭配才能实现分页
            一些导航样式，比如面包屑导航，Tabs标签页。还有弹框提示：对话框，确认框和消息提示框。最后还有各种图标，按钮等
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 我的二维码 -->
      <el-tooltip class="item" effect="dark" content="QQ:752746476" placement="left-end">
        <div class="my">
          <img draggable="false" src="~@/assets/qq.png" alt width="100%" />
        </div>
      </el-tooltip>
    </el-card>

    <!-- 项目预览对话框 -->
    <el-dialog title="文档预览" :visible.sync="dialogVisible" width="50%">
      <img draggable="false" src="~@/assets/yl.png" alt width="100%" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  created() {},
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.el-card {
  position: relative;
}
.my {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 5px;
  right: 5px;
}
a {
  text-decoration: none;
  color: blueviolet;
}
.title {
  font-weight: bold;
  margin-left: 20px;
  line-height: 40px;
  font-size: 22px;
  position: relative;
}
.title::before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgb(87, 78, 78);
  position: absolute;
  border-radius: 20px;
  top: 15px;
  left: -18px;
}
.info {
  margin-top: 15px;
  margin-left: 40px;
  line-height: 20px;
  line-height: 30px;
}
</style>